<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-search" :class="isFocus?'focus':''">
                <span class="ui-search-icon"  @touchstart.stop @click="searchFood(searchName)"><i class="iconfont icon iconsousuo"></i></span>
                <input type="text" id="key" v-model="searchName" @blur="onBlur" @focus="onFocus" placeholder="请输入服务或商品名称" >
            </div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content bgGray flex1" ref="scroll">
            <template v-if="pageStatus">
                <div class="ui-mode-box mt-flex mt-flex-y">
                    <div class="mt-search-pub" v-if="isHot">
                        <h3 class="title">热门搜索</h3>
                        <div class="hot" id="_hot_">
                            <a href="javascript:;" class="hot_btn"
                                :key="`hot-${i}`"
                                v-for="(item,i) in hotList"
                                @touchstart.stop @click="onSearch(item)"
                            >
                                {{item.goods_name}}
                            </a>
                        </div>
                    </div>
                    <div class="mt-flex-inner mt-search-pub mt-search-item">
                        <h3 class="title" v-if="isHot">猜你喜欢</h3>
                        <div class="mt-search-info" :style="isHot?'':'top:0'">
                            <div class="mt-list-item"
                                :key="`hot-${i}`"
                                v-for="(item,i) in likeList"
                            >
                                <a class="box _load_">
                                    <img class="app-image auto" @mousedown.prevent v-lazy.container="formatImgUrl(item.goods_main_image)">
                                </a>
                                <h3>{{item.goods_name}}</h3>
                                <p class="m1">{{item.sales_describe}}</p>
                                <p class="m2"><i>&yen;</i>{{item.price_4_shop_retail}}元<span><i>&yen;</i>{{item.other_market_price}}元</span></p>
                                <a href="javascript:;" class="button _add_" @click.stop="handleAddCart($event,item)">＋</a>
                            </div>
                        </div>
                    </div>
                </div>
                <shopping-cart ref="cart" :cart-num="getShoppingCartNum" @click.native="goShoppingCart"></shopping-cart>
                <transition name="m_cart">
                    <div class="m_add_item flex-row align-center" ref="addCart" :style="getShoppingStyle" v-show="isShopping">
                        <img v-if="currentGoodImage" :src="currentGoodImage">
                    </div>
                </transition>
            </template>
        </div>
        
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import mixinCart from '@/views/content/mixins/cart';
import mixinList from '@/views/content/mixins/list';
import shoppingCart from '../../public/shopping-cart';
export default {
    name: 'my/search',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            public_goods_order_record:{},
            public_goods_order_detail_list:[],
            searchName:'',
            isFocus:false,
            isHot:true,
            hotList:[],
            likeList:[]
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinList,
        mixinCart
    ],
    components:{
        shoppingCart
    },
    computed:{
        getShoppingCartNum(){
            let n=0;
            this.public_goods_order_detail_list.forEach(item=>{
                n+=item.order_number;
            });
            return n;
        },
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getShopInfo().then(({result,response})=>{
                this.getPageInfo({
                    name:'home.search',
                    param:{
                        invoke_method:'search_goods'
                    }
                }).then(({result,response})=>{
                    console.log(result);
                    this.hotList=result.goods_rank_4_shop||[];
                    this.likeList=result.goods_rank_4_you||[];
                });
            }).catch(({msg})=>{
                this.showResult(msg,true);
            });
        },
        // 获取用户信息
        getShopInfo(){
            return new Promise((resolve,reject)=>{
                this.$http.post({
                    name:'common.shop.info',
                    data:{
                        invoke_method:'user_and_shop_info'
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    this.public_goods_order_record=result.public_goods_order_record||{};
                    this.public_goods_order_detail_list=result.public_goods_order_record.list_order_details||[];
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                    resolve({result,response});
                }).catch(({msg})=>{
                    reject({msg});
                });
            });
        },
        // 进入购物车
        goShoppingCart(){
            if(!this.getShoppingCartNum){
                return this.showMessage('您的购物车还没有商品喔！');
            };
            this.$http.post({
                name:'food.detail.submit',
                data:{
                    invoke_method:'details_4_order',
    				id_public_goods_order_record:this.public_goods_order_record.id_public_goods_order_record
                },
                loading:{
                    enabled:true
                }
            }).then(({result,response})=>{
                this.$router.push({
                    path:'/category/shopping',
                    query:{
                        id:this.public_goods_order_record.id_public_goods_order_record
                    }
                });
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
        },
        handleAddCart(event,item){
            if(item.goods_selections&&item.goods_selections.length){
                return this.showMessage('请点击商品进入详情页面选择型号！');
            };
            let target=event.target;
            if(!target.__click){
                target.__click=1;
                this.$http.post({
                    name:'common.shopping.modify.step',
                    data:{
                        invoke_method: 'num_change_order_details',
                        pre_cmd_para_close_error: false,
                        seller_id: item.publicGoodsSupply4Agent?item.publicGoodsSupply4Agent.seller_id:item.id_public_agent_info,
                        id_public_goods_order_record: this.public_goods_order_record.id_public_goods_order_record,
                        pre_cmd_para_order_detail_change_data: item.id_public_goods_info + '-_-1',
                        pre_cmd_para_opt_type: 0
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    delete target.__click;
                    this.isShopping=true;
                    this.currentGoodImage=this.formatImgUrl(item.goods_main_image);
                    this.startAnimate(target,1).then(()=>{
                        this.isShopping=false;
                        this.currentGoodImage='';
                        this.public_goods_order_detail_list=result.public_goods_order_detail_list||this.public_goods_order_detail_list;
                    });
                }).catch(({msg})=>{
                    delete target.__click;
                    this.showMessage(msg);
                });
            };

        },
        onFocus(){
			this.isFocus=true;
		},
		onBlur(){
			this.isFocus=false;
		},
        onSearch(item){
			this.searchFood(item.goods_name);
		},
        searchFood(key){
            if(!key){
                this.showMessage('请输入查询字段');
                return;
            }
            this.isHot=false;
			this.searchName=key;
            this.likeList=[];
            this.$http.post({
                name: 'category.foodNew',
                data: {
                    invoke_method: 'public_page_4m_shop_goods_list_2_reg',
                    id_public_goods_type: this.current_id,
                    type_child: this.current_child_id,
                    pre_db_spec_buyer_id: this.public_agent_info.id_public_agent_info,
                    pre_db_para_begin_idx:0,
                    pre_db_para_length_4_list:100,
                    'public_goods_supply_4_shop.buyer_id': this.public_agent_info.id_public_agent_info,
                    'public_goods_info.goods_name_like':key,
                    'public_goods_supply_4_shop.id_public_goods_supply_4_shop_is_not_null': true,
                    'public_goods_supply_4_shop.is_online': 0,
                    pre_db_para_begin_number:1,
                    pre_db_para_number_search_switch:'public_goods_supply_4_shop.shop_left_count'
                },
                loading:{
                    enabled:false
                }
            }).then(({result,response})=>{
                if(result.page_content&&result.page_content.length){
                    this.likeList=result.page_content;
				}else{
					this.showResult('没有查询到相关数据');
				};
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
		},
        // 请求失败刷新
        handleRefresh(){
            this.init();
        },
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.ui-header-search {
    margin: 0px 2rem 0 1.8rem;
    top: 0.3rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    position: relative;
    padding: 0.4rem 0 0.4rem 2rem;
    line-height: 1rem;
    border: solid 1px #fff;
    border-radius: 0.2rem;
    box-sizing: border-box;
    .ui-search-icon {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2rem;
        text-align: center;
        .iconfont{
            text-align: center;
            line-height: 2rem;
            color: #fff;
            font-size: 0.9rem;
            position: relative;
            font-weight:bolder;
        }
    }
    &.focus .ui-search-icon { 
        transform:translate(14rem,0);
    }
    &.focus{ 
        padding:0.4rem 2rem 0.4rem 0.4rem;
    }
    input {
        border: none;
        background: none;
        height: 1rem;
        line-height: 1rem;
        width: 100%;
        font-size: 0.7rem;
        color: #fff;
        box-sizing: border-box;
        &::placeholder{
            color: #fff;
        }
    }
}
.mt-search-pub {
    padding: 0 0.5rem;
    position: relative;
    h3.title {
        color: #9b9b9b;
        font-size: 0.8rem;
        line-height: 2rem;
        font-weight: normal;
        padding-top: 0.5rem;
    }
    .hot {
        position: relative;
        padding: 0.5rem 0 0;
        a {
            display: block;
            float: left;
            color: #333;
            font-size: 0.7rem;
            padding: 0 0.5rem;
            border-radius: 0.3rem;
            line-height: 1.6rem;
            border: solid 1px #dbdbdb;
            margin: 0 1rem 0.5rem 0;
            white-space: nowrap;
        }
    }
    .mt-search-info {
        position: absolute;
        left: 0;
        top: 2.5rem;
        right: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 0.5rem;
        .mt-list-item {
            position: relative;
            padding: 0.5rem 0 0.5rem 6rem;
            border-bottom: solid 1px #f8f8f8;
            a.box {
                position: absolute;
                left: 0;
                top: 0.5rem;
                width: 5.5rem;
                bottom: 0.5rem;
                background: #f9f9f9;
                
            }
            h3 {
                font-size: 0.8rem;
                font-weight: normal;
                line-height: 1rem;
                margin-bottom: 0.5rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            p.m1 {
                font-size: 0.6rem;
                color: #9b9b9b;
                line-height: 0.8rem;
                position: relative;
                bottom: 0.3rem;
            }
            p.m2 {
                color: #f24b42;
                font-size: 0.8rem;
                position: relative;
                bottom: -0.15rem;
                line-height: 1rem;
            }
            a.button {
                position: absolute;
                bottom: 0.8rem;
                right: 0;
                font-size: 0.7rem;
                border-radius: 0.1rem;
                background: #f5f5f5;
                width: 1.2rem;
                line-height: 1.2rem;
                text-align: center;
                color: #5ac84e;
                height: 1.2rem;
                display: block;
            }
            p.m2 span {
                color: #9b9b9b;
                margin-left: 1rem;
                font-size: 0.6rem;
                text-decoration: line-through;
            }
        }
    }
}
</style>
